<template>
  <div>
    <h1>分类组件</h1>
    <h1>{{ cid }}</h1>
    <button @click="goBack">返回上一页</button>
    <hr />
    <h1>state数据：{{ $store.state.count }}</h1>
    <h1>getters数据：{{ $store.getters.doubleCount }}</h1>
    <button @click="change">通过mutaions触发</button>
    <button @click="acChange">通过actions触发改变</button>
  </div>
</template>
<script>
import { useRouter, useRoute, beforeRouteEnter } from 'vue-router'
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
// mapState 和 mapGetters 都注入到本组件的计算属性使用
// mapMutations 和mapActions 注入到methods
export default {
  setup (props) {
    let router = useRouter()
    let goBack = () => {
      router.go(-1)
    }
    //useRoute() 是vue3 用来接受路由参数的api
    let cid = ref('')
    let route = useRoute()
    cid.value = route.query.cid
    // vuex 在vue3中使用
    let store = useStore()
    console.log(store)
    console.log(store.state.count)
    console.log(store.state.getters)
    // mutations
    let change = () => {
      store.commit('changeCount', 5)
    }
    // actions
    let acChange = () => {
      store.dispatch('countAction', 10)
    }
    return {
      goBack,
      cid,
      change,
      acChange
    }
  }
}
</script>
<style lang="less"></style>
